import React from 'react';
import LogFactory from "log/LogFactory";
import {Card,Table} from "antd";
import roleColumns from "columns/RoleColumns";
import {useAppDispatch, useAppSelector} from "../../../redux/hook";
import {fetchPageData} from "../../../redux/reducer/roleReducer";
import TableToolbar from "common/table/TableToolbar";

const log = LogFactory.getLog("RoleListComponent") ;
const RoleListComponent = () => {

    const dispatch = useAppDispatch() ;
    const roleState = useAppSelector(state => state.role) ;

    // log.debug("role-redux-status: " , roleState.status) ;
    if (roleState.status === 0) {
        dispatch(fetchPageData({current: 1, pageSize: roleState.pageSize})) ;
    }
    // 数据更新完成,重新加载页面数据
    if (roleState.status === 4) {
        log.debug("role-redux-status: 重加载页面数据") ;
        dispatch(fetchPageData({current: roleState.current, pageSize: roleState.pageSize})) ;
    }
    const pageOnChange = (page: number, pageSize: number) => {
        // log.debug("分页查询",page,pageSize) ;
        dispatch(fetchPageData({current: page, pageSize: pageSize})) ;
    } ;

    return (
        <Card
            title={"角色列表"}
            extra={"其他操作"}
        >
            <TableToolbar titleContent={roleState.total}/>
            <Table
                loading={roleState.loading}
                columns={roleColumns}
                dataSource={roleState.data}
                pagination={{
                    total: roleState.total,
                    current: roleState.current,
                    pageSize: roleState.pageSize,
                    onChange: pageOnChange
                }}
            />
        </Card>
    );
};

export default RoleListComponent;